<template>
	<view class="all" :style="{'height':widHeight + 'px'}">
		<view class="equipment">
			<view class="equipment-0">
				<view class="equipment-1">
					在线登录设备(1)
				</view>
				<view class="equipment-2">
					下线后的设备，优购账号会被登出，再次登录需要身份验证
				</view>
			</view>
			<view class="equipment-3">
				<view class="equipment-4">
					<image src="../../static/手机.png" mode="aspectFit"></image>
				</view>
				<view class="equipment-5">
					<view class="equipment-6">
						{{brand || "HWJAD-Q"}}
						<text style="color: #3bce97;">（当前设备）</text>
					</view>
					<view class="equipment-7"><text style="font-size: 13px;">设备平台</text>：{{platform}}</view>
					<view class="equipment-8"> <text style="font-size: 13px;">最近登录：</text>{{userinfo.time}}</view>
				</view>
			</view>
		</view>

		<view class="center-1">
			<image src="../../static/安全.png" mode="aspectFit"></image>
			优购安全中心
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				widHeight: 0,
				platform: '',
				brand: '',
			};
		},
		computed:{
			...mapState("login",["userinfo"]),
		},
		onLoad() {
		uni.$setNavigationBarColor()
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		
			wx.getSystemInfo({
				success: (res) => {
					this.brand = res.brand
					this.platform = res.platform
				}
			})
		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #f3f8fe;
		color: #b3b9be;

		.equipment-0 {
			padding: 15px;

			.equipment-1 {
				font-size: 15px;
			}

			.equipment-2 {
				padding-top: 5px;
				font-size: 12px;
			}
		}

		.equipment-3 {
			display: flex;
			align-items: center;
			background-color: white;
			padding-left: 15px;
			padding-top: 15px;

			.equipment-4 {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #f3f6f5;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 30px;
					height: 30px;
				}
			}

			.equipment-5 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 15px;

				.equipment-6 {
					color: black;
					font-weight: 800;
				}

				.equipment-7 {
					padding-top: 5rpx;
					color: #a6a4a5;
				}

				.equipment-8 {
					color: #a6a4a5;
				}
			}
		}

		.center-1 {
			position: absolute;
			bottom: 20px;
			right: 0;
			left: 50%;
			color: #ccdfea;
			font-size: 13px;
			transform: translate(-20%);

			image {
				vertical-align: middle;
				width: 18px;
				height: 18px;
				padding-right: 5px;
			}
		}
	}
</style>